<template>
  <div class="indexPage">
    <topsBar v-if="goodstopic.topmsg" :topmsg="goodstopic.topmsg"></topsBar>
    <div class="part1">
      <div class="part11" v-for="(item, index) in goodsList" :key="index" @click="jumpDetail(item.id)">
        <div class="part111">
          <image class="part111-img" :src="item.picUrl"></image>
        </div>
        <div class="part112">
          <div class="part1121">{{ item.name }}</div>
          <div class="part1122">
            <span class="part11221"
              >￥<span class="part112212">{{ item.price }}</span>
              <span class="part11223" v-if="item.counterPrice">￥{{ item.counterPrice }} </span>
            </span>

            <div class="part11222">销量:{{ item.sales }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topsBar from './tipsBar.vue'

import * as $utils from '../../utils/utils.js'

export default {
  components: {
    topsBar,
  },
  data() {
    return {
      goodsList: [],
      goodstopic: {},
      myId: '',
    }
  },
  mounted() {},
  methods: {
    loginToGoodsId() {
      this.$parent.topicMask = false
      let goodsIdTo = uni.getStorageSync('goodsIdToLogin')
      if (goodsIdTo) {
        let code2 = $utils.StrQuery(goodsIdTo.split('?')[1], 'id')
        if (code2) {
          uni.removeStorageSync('goodsIdToLogin')
          this.jumpDetail(code2)
        }
      }
    },
    on_Show() {
      this.TopicDetail()
    },
    jumpDetail(id) {
      window.location.href = window.location.origin + '#/pages/goods/goods?id=' + id
    },
    // IndexUrl() {
    //   this.$api('IndexUrl').then((res1) => {
    //     let temp = res1.data.topicList
    //     if (temp) {
    //       this.TopicDetail(temp[0].id)
    //     }
    //   })
    // },
    TopicDetail() {
      if (!this.myId) return
      this.$api('TopicDetail', {
        id: this.myId,
      })
        .then((res1) => {
          this.goodstopic = res1.data.topic
          this.goodsList = res1.data.goods
          uni.setStorageSync('topic', res1.data.topic)
          if (this.goodstopic.state == 1) {
            this.goodstopic.topmsg = `本活动于${this.goodstopic.addTime}开始`
          }
          if (this.goodstopic.state == 3) {
            this.goodstopic.topmsg = `本活动已于${this.goodstopic.endTime}结束`
          }
          if (this.goodstopic.isOnShelves == false && this.goodstopic.state != 1) {
            this.goodstopic.topmsg = `本活动已于${this.goodstopic.endTime}结束`
          }
          if (this.goodstopic.deleted) {
            this.$parent.topicMaskDoor(true, '活动已结束！')
          } else {
            this.$parent.topicMaskDoor(false)
          }
          uni.setNavigationBarTitle({
            title: this.goodstopic.title || '泽超新福礼',
          })
          this.goodsList.forEach((v1, index) => {
            this.goodstopic.goods.forEach((v2) => {
              let temp = v2.split('-')
              if (v1.id == temp[0]) {
                let aaa = v1.productList
                if (aaa && aaa.length) {
                  let bbb = aaa.sort((a, b) => {
                    return a.price - b.price
                  })
                  v1.price = bbb[0].price || 0
                  v1.counterPrice = bbb[0].counterPrice || 0
                }
                this.goodsList[index] = v1
              }
            })
          })

          this.$parent.wxShare()

          let tempStr = location.href
            .split('?')
            .slice(-1)[0]
            .split('#')[0]
          let code1 = $utils.StrQuery(tempStr, 'shareId')
          if (code1 && !this.goodstopic.deleted) {
            window.location.replace(window.location.origin + '#/pages/goods/goods?id=' + code1)
          }
        })
        .catch(() => {
          this.$parent.topicMaskDoor(true, '网络异常！')
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.part0 {
  height: 74rpx;
}
.part01 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 99;
}
.part1 {
  padding: 30rpx 30rpx 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .part11 {
    width: 332rpx;
    background: #fff;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
  }
  .part111 {
    width: 100%;
    font-size: 0;
  }
  .part111-img {
    width: 332rpx;
    height: 332rpx;
  }
  .part112 {
    padding: 18rpx 20rpx 21rpx;
  }
  .part1121 {
    font-size: 28rpx;
    line-height: 38rpx;
    height: 76rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .part1122 {
    display: flex;
    font-size: 30rpx;
    color: #b5b6b8;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .part11221 {
    color: #f60;
    height: 36rpx;
    transform: translateY(2rpx);
  }
  .part112212 {
    font-size: 36rpx;
    line-height: 36rpx;
    font-weight: bold;
  }
  .part11222 {
    flex: 1;
    overflow: hidden;
    text-align: right;
    font-size: 20rpx;
    line-height: 20rpx;
  }
  .part11223 {
    font-size: 20rpx;
    line-height: 20rpx;
    color: #b5b6b8;
    text-decoration: line-through;
    padding-left: 10rpx;
  }
}
</style>
